<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>AnyChart Demo</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<script type="text/javascript" language="javascript" src="<%=path %>/scripts/AnyChartStock.js?v=1.7.0r9000"></script>
		<script type="text/javascript" language="javascript" src="<%=path %>/scripts/jquery.min.js"></script>
		
		<!-- chart size settings -->
		<style type="text/css">
			#chartContainer {
				width: 700px;
				height: 520px;
				float: left;
			}
		</style>
		<script type="text/javascript" language="javascript">
			
			// Creating new chart object. 
			var chart = new AnyChartStock("<%=path %>/swf/AnyChartStock.swf?v=1.7.0r9000", "<%=path %>/swf/Preloader.swf?v=1.7.0r9000");
			// Setting XML config file.
			chart.setXMLFile("<%=path %>/xml/config.xml");
			// NOTE: needConfig flag set to true, provides an ability to work with chart objectModel
			chart.needConfig = true; 
			// Writing the flash object into the page DOM.
			chart.write("chartContainer");
						
			function onSeriesTypeChange() {
				// Change the type of the series in the object model.
				chart.getSeriesById("idMainChart", "idSeriesA").type = $("#seriesType").val();
				// Apply changes.
				chart.applySettingsChanges();
			}

			function onSeriesColorChange() {
				// Change the color of the series.
				chart.getSeriesById("idMainChart", "idSeriesA").color = $("#seriesColor").val();
				// Apply changes.
				chart.applySettingsChanges();
			}

			function onSeriesNameChange() {
				// Change the name of the series.
				chart.getSeriesById("idMainChart", "idSeriesA").name = $("#seriesName").val();
				// Apply changes.
				chart.applySettingsChanges();
			}
			
			//---------------------------------------------------------------------------------------------------
			//		html events binding
			//---------------------------------------------------------------------------------------------------
			
			$(function() {
				$("#seriesType").change(onSeriesTypeChange);
				$("#seriesColor").change(onSeriesColorChange);
				$("#seriesName").change(onSeriesNameChange);
			});
			
			//---------------------------------------------------------------------------------------------------
			//		Enable html controls
			//---------------------------------------------------------------------------------------------------
			
			chart.onChartDraw = function() {
				$("#seriesType").removeAttr("disabled");
				$("#seriesColor").removeAttr("disabled");
				$("#seriesName").removeAttr("disabled");
				chart.onChartDraw = null;
			}
		</script>
		
		<!-- table settings -->
		<style type="text/css">
			table.settings  {
				border-style: solid;
				border-width: 1px;
				border-color: #D0CDC9;
			}

			table.settings tr th {
				font:normal 60% Verdana;
				background-color: #DCD9D5;
				font-weight:bold;
				padding-bottom:5px;
				padding-top:5px;
				padding-left:10px;
				text-align:left;
			}
			
			table.settings tr td {
				background-color: #F8F4F0;
				font:normal 70% Verdana;
				padding-bottom:2px;
				padding-top:2px;
				padding-left:10px;
				text-align:left;	
			}
		</style>
	</head>
	<body>
		<div id="chartContainer"><!-- Chart Container --></div>

		<!-- Table with series settings -->
		<table class="settings">
			<tr>
				<th colspan="2">Series Settings:</th>
			</tr>
			<tr>
				<td>Series Type:</td>
				<td><select id="seriesType" disabled="disabled" autocomplete="off">
					<option value="Candlestick">Candlestick</option>
					<option value="OHLC">OHLC</option>
					<option value="Line" selected="true">Line</option>
					<option value="Area">Area</option>
					<option value="Bar">Bar</option>
					<option value="StepLine">StepLine</option>
					<option value="Stick">Stick</option>
					<option value="Marker">Marker</option>
					<option value="Spline">Spline</option>
					<option value="SplineArea">SplineArea</option>
					<option value="StepLineArea">StepLineArea</option>
					<option value="RangeBar">RangeBar</option>
					<option value="RangeArea">RangeArea</option>
					<option value="RangeSplineArea">RangeSplineArea</option>
				</select></td>
			</tr>
			<tr>
				<td>Series Color:</td>
				<td><input type="text" id="seriesColor" disabled="disabled" value="#DC3912" autocomplete="off"/></td>
			</tr>
			<tr>
				<td>Series Name:</td>
				<td><input type="text" id="seriesName" disabled="disabled" value="Series A" autocomplete="off"/></td>
			</tr>
		</table>
	</body>
</html>